<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

    login-form {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    login-form h2 {
        margin-bottom: 20px;
    }

    input-field {
        width: 100%;
        height: 100px;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    login-button {
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    login-button:hover {
        background-color: #45a049;
    }
</style>
<body>
<form class="login-form" id="register-form">
    <h2>用户注册</h2>
    <input type="text" placeholder="用户名" name="username" class="input-field" required><br>
    <div style="height: 20px" ></div>
    <input type="password" placeholder="密码" name="password" class="input-field" required><br>
    <div style="height: 20px" ></div>
    <button type="button" class="register-button" id="register-button">注册</button>
    <button type="button" class="login-button" id="login-button" onclick="jum()">跳转登录</button>
</form>
</body>
<script>
    $(document).ready(function(){
        $("#register-button").click(function (){
            var data=$("#register-form").serialize();
            $.ajax({
                url:"/register",
                type:"post",
                data:data,
                success:function(data){
                    if(data=="success"){

                        alert("注册成功");
                        window.location.href="/login.html"
                    }else {
                        alert("注册失败,请检查用户名是否已存在");
                    }
                },error:function(){
                    alert("注册失败,请检查用户名是否已存在")
               }
            })
        })
    })
    function jum(){
        window.location.href="/login.html"
    }
</script>
</html>